[@mantine/core] FloatingIndicator: Fix position and size calculation under scaled ancestors#9071
Open
saadpocalypse wants to merge 1 commit into
Conversation
…under scaled ancestors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
FloatingIndicatorusestarget.getBoundingClientRect()andparent.getBoundingClientRect()to compute dimensions and position offsets.getBoundingClientRect()returns values in viewport coordinate space, which incorporates any CSS scale transforms (transform: scale(...)) applied to ancestor elements or during enter/exit animations (e.g.Modaltransitions).When inline CSS
width,height, andtransformvalues are assigned using these viewport-space measurements on an element inside a scaled ancestor:SegmentedControl) renders undersized (e.g., ~90% of the target's width) and shifted toward the transform origin.ResizeObserverdoes not correct the indicator after transition completion because CSS transforms do not alter unscaledcontent-boxlayout geometry.Solution
Normalized viewport measurements back into the parent's local coordinate system in
packages/@mantine/core/src/components/FloatingIndicator/use-floating-indicator.ts:scaleX) and vertical (scaleY) scale factors by comparingparent.getBoundingClientRect()againstparent.offsetWidthandparent.offsetHeight.offsetWidth === 0oroffsetHeight === 0) to safely fallback to1when elements are hidden or unmounted.top,left,width, andheightby dividing viewport-space deltas and dimensions byscaleYandscaleX.ScaledAncestortopackages/@mantine/core/src/components/SegmentedControl/SegmentedControl.story.tsxto visually test indicator geometry under scaled ancestors.Tests
packages/@mantine/core/src/components/FloatingIndicator/FloatingIndicator.test.tsxasserting correct normalization when parent bounding geometry is scaled. Verified that all 316@mantine/coreJest test suites (9,725 tests) pass (npm run jest @mantine/core).npm run typecheck), builds without errors (npm run build), passes linting (npx oxlint), and follows repository formatting (oxfmt).ScaledAncestorstory in Storybook (SegmentedControl>ScaledAncestor).Resolves #9070